<template>
  <div v-if="showMain" id="notifyWay">
    <div class="search-form">
      <div class="filter">
        <el-button type="primary" @click="addTemplate">{{ $t('app.add') }}</el-button>
      </div>
      <div class="seperator"></div>
      <div class="filter">
        <span>{{ $t('notifyWay.notifyType') }}：</span>
        <el-select v-model="formData.notifyType" style="width: 150px;" @change="changeNotifyType" clearable>
          <el-option v-for="item in templateTypeList" :key="item.value" :value="item.value" :label="item.name" />
        </el-select>
      </div>
      <div class="filter search">
        <el-input v-model="formData.name" style="width: 200px" :placeholder="$t('notifyWay.namePlaceholder')" @keyup.enter="search">
          <template #suffix>
            <el-button :icon="Search" @click="search" />
          </template>
        </el-input>
      </div>
    </div>
    <div>
      <div>
        <el-table size="small" :data="tableDatas" style="width: 100%" header-cell-class-name="grid-header" border>
          <el-table-column :label="$t('notifyWay.name')" prop="name">
          </el-table-column>
          <el-table-column :label="$t('notifyWay.notifyType')" prop="notifyType">
            <template #default="scope">
              <span>{{ $t(`notifyWay.${scope.row.notifyType}`) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('notifyWay.notifyTarget')" min-width="200">
            <template #default="scope">
              <div v-if="scope.row.notifyType === 'email'">{{ scope.row.email }}</div>
              <div v-if="scope.row.notifyType === 'WeCom' || scope.row.notifyType === 'DingTalk'">
                <div v-if="scope.row.sendWay === 1">
                  {{ $t(`notifyWay.robotSendWay`) }}
                </div>
                <div v-else>
                  <div v-if="scope.row.personId">{{ $t('notifyWay.personId') + ': ' + scope.row.personId }}</div>
                  <div v-if="scope.row.deptId">{{ $t('notifyWay.deptId') + ': ' + scope.row.deptId }}</div>
                </div>
              </div>
              <div v-if="scope.row.notifyType === 'webhook'">{{ scope.row.webhook }}</div>
              <div v-if="scope.row.notifyType === 'SNMP'">{{ 'udp:' + scope.row.snmpIp  + '/' + scope.row.snmpPort }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('notifyTemplate.templateName')" prop="notifyTemplateName">
          </el-table-column>
          <el-table-column :label="$t('app.operate')" width="120" fixed="right">
            <template #default="scope">
              <el-link :underline="false" type="primary" size="small" style="margin-right: 10px" @click="editTemplate(scope.row.id)">{{
                $t('app.edit')
              }}</el-link>
              <el-link :underline="false" type="primary" size="small" @click="delTemplate(scope.row.id)">{{
                $t('app.delete')
              }}</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="page.currentPage" v-model:pageSize="page.pageSize" :total="page.total"
          :page-sizes="[10, 20, 30, 40]" class="pagination" layout="total,sizes,prev,pager,next" background small
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <div v-else>
    <NotifyWayDetail :id="curId" :state="state" @updateNotifyWay="updateNotifyWay" style="margin-top: 8px;"
      @cancelNotifyWay="cancelNotifyWay" />
  </div>
</template>

<script setup lang='ts'>
import { Search } from "@element-plus/icons-vue";
import "element-plus/es/components/message-box/style/index";
import { useRequest } from "vue-request";
import request from "@/request";
import { ElMessageBox, ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { cloneDeep } from 'lodash-es';
import NotifyWayDetail from "@/views/notify/NotifyWay/NotifyWayDetail.vue";

const emit = defineEmits(["updateState"])

const { t } = useI18n();
const initFormData = {
  name: '',
  notifyType: ''
}

const showMain = ref<boolean>(true)
const formData = ref<any>(cloneDeep(initFormData));
const tableDatas = ref<any[]>([]);
const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const templateTypeList = ref<any[]>([{
  name: t('notifyWay.email'), value: 'email'
}, {
  name: t('notifyWay.WeCom'), value: 'WeCom'
}, {
  name: t('notifyWay.DingTalk'), value: 'DingTalk'
}, {
  name: t('notifyWay.webhook'), value: 'webhook'
}, {
  name: t('notifyWay.SNMP'), value: 'SNMP'
}])
const curId = ref<number>()
const state = ref<string>()

const { data: res, run: requestData } = useRequest(
  () => {
    let params = {}
    params = Object.assign(params, formData.value, { pageNum: page.currentPage, pageSize: page.pageSize })
    return request.get("/api/v1/notifyWay", params)
  },
  { manual: true }
);
watch(res, (res: any) => {
  if (res && res.code === 200) {
    tableDatas.value = res.rows || []
    page.total = res.total
  } else {
    tableDatas.value = []
    page.total = 0
    const msg = t("app.queryFail");
    ElMessage({
      showClose: true,
      message: msg,
      type: "error",
    });
  }
});
const search = () => {
  page.currentPage = 1
  page.pageSize = 10
  requestData()
}
const changeNotifyType = () => {
  search()
}
const handleSizeChange = (val: number) => {
  page.pageSize = val
  requestData()
}
const handleCurrentChange = (val: number) => {
  page.currentPage = val
  requestData()
}
const addTemplate = () => {
  emit('updateState', 'addNotifyWay')
  state.value = 'add'
  showMain.value = false
}
const editTemplate = (id: number) => {
  emit('updateState', 'editNotifyWay')
  curId.value = id
  state.value = 'edit'
  showMain.value = false
}
const delTemplate = (id: number) => {
  ElMessageBox.confirm(
    t('app.deleteTip'),
    t('app.tip'),
    {
      confirmButtonText: t('app.confirm'),
      cancelButtonText: t('app.cancel'),
      type: 'warning',
    }
  ).then(() => {
    request.delete(`/api/v1/notifyWay/${id}`).then((res: any) => {
      if (res && res.code === 200) {
        ElMessage({
          type: 'success',
          message: t('app.delSuccess'),
        })
        formData.value = cloneDeep(initFormData)
        search()
      } else {
        ElMessage({
          type: 'error',
          message: t('app.delFail') + (res && res.msg ? ',' + res.msg : ''),
        })
      }
    }).catch((res: any) => {
      ElMessage({
        type: 'error',
        message: t('app.delFail') + (res && res.msg ? ',' + res.msg : ''),
      })
    })
  }).catch(() => {

  })
}
const updateNotifyWay = () => {
  formData.value = cloneDeep(initFormData)
  search()
  curId.value = undefined
  emit('updateState', '')
  showMain.value = true
}
const cancelNotifyWay = () => {
  curId.value = undefined
  emit('updateState', '')
  showMain.value = true
}

defineExpose({ cancelNotifyWay })

onMounted(() => {
  requestData()
})

</script>
<style scoped lang='scss'>
.el-table {
  height: calc(100vh - 110px - 62px - 82px - 34px);
}
</style>